
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Skinning via Progressive Enhancement using the Event Utility and the Loader</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

	.yui3-checkboxes-loading #checkboxes {
		display: none;
	}

</style>

<script type="text/javascript">

	//	Hide the checkboxes if JavaScript is enabled to prevent 
	//	the user from seeing a flash of unstyled content while
	//	the JavaScript for the checkboxes is being loaded.
	document.documentElement.className = "yui-checkboxes-loading";

</script>
<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Skinning via Progressive Enhancement using the Event Utility and the Loader</h1>

<div class="exampleIntro">
	<p>
Using Progressive Enhancement to skin checkboxes with the help of the 
<a href="../../api/Loader.html">Loader</a>,
<a href="../../api/module_classnamemanager.html">ClassNameManager Utility</a>,
and the Event Utility's <code>focus</code> and <code>blur</code> events and the 
<code>delegate</code> method.
</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="checkboxes">
	<div>
		<label for="field-1">Field 1: </label>
		<span>
			<span>
				<input type="checkbox" id="field-1" name="field-1" value="1">
			</span>
		</span>
	</div>
	<div>
		<label for="field-2">Field 2: </label>
		<span>
			<span>
				<input type="checkbox" id="field-2" name="field-2" value="2">
			</span>
		</span>
	</div>
	<div>
		<label for="field-3">Field 3: </label>
		<span>
			<span>
				<input type="checkbox" id="field-3" name="field-3" value="3">
			</span>
		</span>
	</div>			
</div>

<script type="text/javascript">

	YUI({
	
		base: "../../build/",
	
		//	Load the stylesheet for the skinned checkboxes via JavaScript, 
		//	since without JavaScript skinning of the checkboxes wouldn't 
		//	be possible.
		
		modules: {

			"checkboxcss": {
				type: "css",
				fullpath: "assets/checkbox.css"
			},

			"checkboxjs": {
				type: "js",
				fullpath: "assets/checkbox.js",
				requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
			}			    

		}

	}).use("checkboxjs", function(Y, result) {

	    //	The callback supplied to use() will be executed regardless of
	    //	whether the operation was successful or not.  The second parameter
	    //	is a result object that has the status of the operation.  We can
	    //	use this to try to recover from failures or timeouts.

	    if (!result.success) {

	        Y.log("Load failure: " + result.msg, "warn", "Example");

			//	Show the checkboxes if the loader failed that way the original 
			//	unskinned checkboxes will be visible so that the user can
			//	interact with them either way.

			document.documentElement.className = "";

	    }

	});

</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
